<!-- 我的粉丝 -->
<template>
	<view class="page" :style="{ '--color': color }">
		<status-bar :title="title ? title : '我的会员'"></status-bar>
		<view class="menuList" v-if="commission.length > 0">
			<view class="nav_top_box" :style="{ top: navHeight + System.statusBarHeight + 'px' }">
				<view class="navlists" v-if="commission.length > 0" :class="navTab == 1 ? 'navAction thmeColor' : ''" @click="navclick(1, 0)">
					<text>{{ level_name[0].name }}（{{ level_name[0].num }}）</text>
				</view>
				<view class="navlists" v-if="commission.length > 1" :class="navTab == 2 ? 'navAction thmeColor' : ''" @click="navclick(2, 1)">
					<text>{{ level_name[1].name }}（{{ level_name[1].num }}）</text>
				</view>
				<view class="navlists" v-if="commission.length > 2" :class="navTab == 3 ? 'navAction thmeColor' : ''" @click="navclick(3, 2)">
					<text>{{ level_name[2].name }}（{{ level_name[2].num }}）</text>
				</view>
				<view class="Advertising_article thmeBg thmeColor" :style="{ left: 33 * (navTab - 1) + '%' }"></view>
			</view>
		</view>
		<view class="type2" v-if="list && list.length > 0">
			<view class="item flex-box" v-for="(item, index) in list" :key="index">
				<image
					class="friHead"
					@error="item.v_headimg = ''"
					:src="item.v_headimg ? item.v_headimg : staticUrl + '/images/jh_up/head.jpg'"
					mode=""
					@click.stop="toUrl(`Fandetails?down_v_id=${item.v_id}`)"
				></image>
				<view class="flex">
					<view class="row j-sb" @click.stop="toUrl(`Fandetails?down_v_id=${item.v_id}`)">
						<view class="d-flex a-center">
							<text class="name">{{ item.v_name }}</text>
							<text class="id">（{{ item.v_tel }}）</text>
						</view>
						<text class="black size28">{{ item.vip_level }}</text>
					</view>
					<view class="time">{{ item.v_addtime }}</view>
					<view v-if="item.special" class="numBox">
						<view class="row f-wrap" v-if="item.special[0]">
							<view class="num" @click="clicBtn(sItem)" v-for="(sItem, sIndex) in item.special[0]" :key="sIndex">{{ sItem.title }}:{{ sItem.val }}</view>
						</view>
						<view class="row f-wrap" v-if="item.special[1]">
							<view class="num" @click="clicBtn(sItem)" v-for="(sItem, sIndex) in item.special[1]" :key="sIndex">{{ sItem.title }}:{{ sItem.val }}</view>
						</view>
					</view>
					<view class="num-list flex-box" v-else>
						<view class="num" @click.stop="toUrl(`selfShop?down_v_id=${item.v_id}`)">自购：{{ item.orders }}</view>
						<view class="num" @click.stop="toUrl(`Fandetails?down_v_id=${item.v_id}`)">粉丝数：{{ item.members }}</view>
						<view class="num" @click.stop="toUrl(`Scoredetail?down_v_id=${item.v_id}&Status=1`)">单量：{{ item.orders_num }}</view>
						<view class="num" @click.stop="toUrl(`Scoredetail?down_v_id=${item.v_id}&Status=2`)">业绩：{{ item.cumulative_income }}</view>
					</view>
				</view>
			</view>
		</view>
		<empty v-else type="1" cat="3" :msg="'你还没有该信息内容哟~'"></empty>
	</view>
</template>

<script>
import { mapState } from 'vuex';
var that;
export default {
	data() {
		return {
			title: '',
			navTab: 1,
			staticUrl: this.staticUrl,
			toTop: false,
			brokerage_list: [],
			noData: false,

			commission: [],
			list: '',
			msg: '一',

			state: '', // 我的团队
			level_name: [],
			vid2: '',
			page: 1,
			pagecount: 10,
			showLevel: 1, //等级
			getMore: true
		};
	},

	onLoad(e) {
		console.log(e);
		let that = this;
		if (e.vid2) this.vid2 = e.vid2;
		if (e.state == 1) {
			that.title = '我的团队';
			that.state = e.state;
		}
		if (this.state == 1) {
			this.my_income_team();
		} else {
			this.my_income(this.showLevel);
		}
	},
	methods: {
		clicBtn(item) {
			if (!item.path) return;

			this.toUrl(item.path);
		},
		navclick(i, positions) {
			let that = this;
			if (positions == 0) {
				that.msg = '一';
			}
			if (positions == 1) {
				that.msg = '二';
			}
			if (positions == 2) {
				that.msg = '三';
			}

			// that.list = that.commission[positions];
			this.showLevel = this.level_name[positions].showLevel;
			that.navTab = i;
			this.page = 1;
			this.getMore = true;
			this.$pop.pageScrollTo();
			this.my_income(this.showLevel);
		},

		//  我的会员
		my_income(showLevel) {
			let that = this;
			this.$showLoading('');
			that.$http
				.post({
					url: '/zzj_singleSaleApi/distribution_people_new',
					data: {
						vid2: this.vid2,
						page: this.page,
						pagecount: this.pagecount,
						showLevel
					}
				})
				.then((res) => {
					this.$hideLoading();
					if (res.errcode != 100) return this.Toast(res.msg);
					const result = res.data;
					that.commission = result;
					if (res.level_name.length) that.level_name = res.level_name;

					that.level_name.forEach((item) => {
						if (item.showLevel == showLevel) {
							const resultData = result[showLevel - 1] || [];
							this.page == 1 ? (this.list = resultData) : (this.list = [...this.list, ...resultData]);
						}
					});
					const resultData = result[showLevel - 1] || [];
					if (resultData.length < this.pagecount) this.getMore = false;
				});
		},

		//  我的团队
		my_income_team() {
			let that = this;
			that.$http
				.post({
					url: '/zzj_singleSaleApi/distribution_people_team'
				})
				.then((res) => {
					if (res.errcode != 100) return this.Toast(res.msg);
					this.commission = res.data;
					const result = res.data;
					if (result.length) this.list = result[0];
				});
		}
	},
	computed: {
		...mapState(['tabTitle', 'color', 'city', 'navHeight', 'System', 'share', 'vid'])
	},
	onReachBottom() {
		if (!this.getMore) return;
		this.page++;
		if (this.state != 1) this.my_income(this.showLevel);
	},
	onShareAppMessage(option) {
		return {
			title: this.share.title,
			desc: this.share.desc,
			path: '/pages/index/index?share_v_id=' + this.vid + '&pageType=99',
			imageUrl: this.share.imageUrl
		};
	}
};
</script>

<style scoped lang="scss">
.right {
	float: right;
}

.page {
	background-color: #f8f8f8;

	.nav_top_box {
		width: 100%;
		height: 80upx;
		background: #ffffff;
		line-height: 80upx;
		font-size: 28upx;
		color: #333333;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.1);

		.navlists {
			width: 33%;
			display: inline-block;
			text-align: center;
			color: #999999;
			font-size: 24upx;

			&.navAction {
				position: relative;
				font-weight: bold;
				font-size: 40upx;
				color: #222222;
			}
		}

		.Advertising_article {
			width: 30upx;
			height: 6upx;
			position: absolute;
			bottom: 0;
			transition: left 0.2s;
			border-radius: 6upx;
			background-color: #222222;
			transform: translateX(106rpx);
		}
	}

	// 样式二
	.type2 {
		padding: 20rpx;
		padding-top: 100upx;

		.item {
			background-color: #ffffff;
			padding: 20rpx;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			.friHead {
				border-radius: 50%;
				height: 64rpx;
				width: 64rpx;
				margin-right: 20rpx;
			}

			.name {
				font-size: 28rpx;
				font-weight: bold;
			}

			.id {
				font-size: 28rpx;
				color: #999999;
			}

			.time {
				color: #999999;
				margin-top: 4rpx;
			}

			.numBox {
				display: flex;
				flex-wrap: wrap;
				padding: 10rpx 20rpx;
				margin-top: 20rpx;
				background-color: #f5f5f5;
				border-radius: 8rpx;
				.num {
					width: 50%;
					height: 70rpx;
					color: #333333;
					font-size: 26rpx;
					display: flex;
					align-items: center;
				}
			}
		}
	}
}
</style>
